<template>
  <div class="article-container">

      <el-card class="top-card">
        <div slot="header" class="clearfix">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>活动管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-form ref="form" :model="form" label-width="45px" size="mini" v-loading="loading">
            <el-form-item label="状态">
                <el-radio-group v-model="status">
                <el-radio :label="null">全部</el-radio>
                <el-radio :label="0">草稿</el-radio>
                <el-radio :label="1">待审核</el-radio>
                <el-radio :label="2">审核通过</el-radio>
                <el-radio :label="3">审核失败</el-radio>
                <el-radio :label="4">已删除</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="频道">
                <el-select v-model="channelId" placeholder="请选择活动区域">
                <el-option label="全部" :value="null"></el-option>
                <el-option :label="item.name" :value="item.id" v-for="item in channels" :key="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="日期">
            <el-date-picker
                v-model="rangeDate"
                type="datetimerange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"> 
            </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadArticles(1)" :disabled="loading">查询</el-button>
            </el-form-item>
        </el-form>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>根据筛选条件查询到{{ totalCount }}条数据</span>
        </div>
        <el-table :data="articles" class="list-table" size="mini" :v-loading="loading">
            <el-table-column label="封面" >
                <template slot-scope="scope">
                    <el-image style="width: 100px; height: 100px" :previewSrcList="scope.row.cover.images" :src="scope.row.cover.images[0]" fit="cover" lazy></el-image>
                    <!-- <img v-if="scope.row.cover.images[0]" class="article-cover" :src="scope.row.cover.images[0] || './zanwu.jpg'" alt="加载中...">
                    <img v-else class="article-cover" src="./zanwu.jpg" alt="加载中..."> -->
                </template>
            </el-table-column> 
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column label="状态"> 
                <template slot-scope="scope">
                    <el-tag :type="articleStatus[scope.row.status].type">{{articleStatus[scope.row.status].text}}</el-tag>    
                </template>
            </el-table-column>
            <el-table-column prop="pubdate" label="发布时间"> </el-table-column>
            <el-table-column label="操作"> 
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" circle icon="el-icon-edit" @click="$router.push('/publish?id='+scope.row.id)"></el-button>
                    <el-button size="mini" type="danger" circle icon="el-icon-delete" @click="handleDelete(scope.row.id)"></el-button>
                </template> 
            </el-table-column>
        </el-table> 

        <el-pagination layout="prev, pager, next" :total="totalCount" :page-size="pageSize" background @current-change="onCurrentChange" :disabled="loading" :current-page.sync="currentPage">
        </el-pagination>
      </el-card>

  </div>
</template>

<script>
import { getArticles,getArticleChannel,delArticle } from '@/api/article'
export default {
  name: 'ArticleIndex',
  data () {
    return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        articles:[],
        articleStatus:[
            {status:0 ,text:'草稿' ,type:''},
            {status:1 ,text:'待审核' ,type:'info'},
            {status:2 ,text:'审核通过' ,type:'success'},
            {status:3 ,text:'审核失败' ,type:'warning'},
            {status:4 ,text:'已删除' ,type:'danger'},
        ],
        totalCount: 0,
        pageSize: 10,
        status: null,
        channels:[],
        channelId: null,
        rangeDate: null,
        loading: true,
        currentPage: 1
    }
  },
  methods: {
      loadArticles(page){
          this.loading = true;
          getArticles({
              page: page,
              per_page: this.pageSize,
              status: this.status,
              channel_id: this.channelId,
              begin_pubdate: this.rangeDate ? this.rangeDate[0] : null,
              end_pubdate: this.rangeDate ? this.rangeDate[1] : null
          }).then(res => {
              const { results, total_count } = res.data.data;
              this.articles = results;
              this.totalCount = total_count;
              this.loading = false;
          })
      },
      onCurrentChange(page = 1){
          this.loadArticles(page);
      },
      loadChannel(){
          getArticleChannel().then(res => {
              this.channels = res.data.data.channels;
          })
      },
      handleDelete(id){
        this.$confirm('确认删除码？?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           delArticle(id).then(res => {
               this.loadArticles(this.currentPage);
          })
        }).catch(() => {
                   
        });
      }
  },
  created () {
      this.loadArticles(1);
      this.loadChannel();
  }
} 
</script>

<style lang="less" scoped>
.article-container{
    .top-card{
        margin-bottom: 30px;
    }
    .list-table{
        margin-bottom: 20px;
    }
}
</style>